<template>
  <a-collapse v-model:activeKey="currentKey">
    <a-collapse-panel
      v-for="(item, index) in editGroups"
      :key="`item-${index}`"
      :header="item.text"
    >
      <props-table :props="item.props" @change="handleChange"></props-table>
    </a-collapse-panel>
  </a-collapse>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { difference } from 'lodash-es'
import { type AllComponentProps } from '@/defaultProps'
import PropsTable from '../PropsTable.vue'
import type { PropType } from 'vue'
type IGroupItems = {
  text: string
  items: string[]
}
defineOptions({
  name: 'EditorGroup',
})
const emits = defineEmits(['change'])
const props = defineProps({
  propsList: {
    type: Object as PropType<AllComponentProps>,
    required: true,
  },
  groupList: {
    type: Array as PropType<IGroupItems[]>,
    default: () => [
      {
        text: '尺寸',
        items: [
          'height',
          'width',
          'paddingLeft',
          'paddingRight',
          'paddingTop',
          'paddingBottom',
        ],
      },
      {
        text: '边框',
        items: ['borderStyle', 'borderColor', 'borderWidth', 'borderRadius'],
      },
      {
        text: '阴影与透明度',
        items: ['opacity', 'boxShadow'],
      },
      {
        text: '位置',
        items: ['left', 'top'],
      },
      {
        text: '事件功能',
        items: ['actionType', 'url'],
      },
    ],
  },
})
const currentKey = ref('item-0')
const newGroups = computed(() => {
  // 将props.groupList中的items属性展开，合并成一个数组
  const allNormalProps = props.groupList.reduce((prev, current) => {
    return [...prev, ...current.items]
  }, [] as string[])
  // 获取propsList中不在allNormalProps中的属性
  const specialProps = difference(Object.keys(props.propsList), allNormalProps)
  // 返回一个新的数组，包含基本属性和props.groupList
  return [
    {
      text: '基本属性',
      items: specialProps,
    },
    ...props.groupList,
  ]
})
const editGroups = computed(() => {
  // 遍历newGroups中的每个group
  return newGroups.value.map((group) => {
    // 创建一个propsMap对象，用于存储每个group的属性
    const propsMap = {} as AllComponentProps
    // 遍历group中的每个item
    group.items.forEach((item) => {
      // 将item作为key，propsList中的对应属性作为value，存储到propsMap中
      const key = item as keyof AllComponentProps
      propsMap[key] = props.propsList[key]
    })
    // 返回一个新的group对象，包含原来的group和propsMap
    return {
      ...group,
      props: propsMap,
    }
  })
})

const handleChange = (e: any) => {
  emits('change', e)
}
</script>

<style scoped></style>
